<!--  -->
<template>
  <div class='header'>
    <div class="box" v-for="(item,index) in cities" :label="item" :key="index">
      <div class="box1">
        <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox>{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="box2" @click="examine(item.url)">查看</div>
      <!-- 导航 -->
      <navs></navs>

    </div>


  </div>
</template>

<script>
  import api from "@/utils/api";
  import request from "@/utils/request";
import Navs from './components/navs.vue';
  // import windowsmodule from "@/components/index";
  export default {
    name: '',
    components: {
     
        Navs // windowsmodule: windowsmodule
    },
    data() {
      //这里存放数据
      return {
        data1: {
          pageSize: 10,
          page: 1,
          type: "system",
          userId: 187327
        },
        cities: [{
            name: 'axios的封装',
            checkedCities: true,
            url: "/axios"
          },
          {
            name: 'less的安装与使用',
            checkedCities: true,
            url: "/less"
          },
          {
            name: '父子组件传值',
            checkedCities: true,
            url: "/fatherSon"
          },
          {
            name: 'vuex的使用',
            checkedCities: false,
            url: "/vuex"
          },
          {
            name: 'echarts的使用',
            checkedCities: true,
            url: "/echarts"
          },
          {
            name: '点击图片放大插件',
            checkedCities: false,
            url: "/viewer"
          }
        ]
      };
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      console.log(api.url2)
      console.log(api.menu)
      // console.log(request)
      // 请求
      // request.get(api.menu, this.data1).then(res => {
      //   console.log(res)
      //   // this.$message.success('请求成功')
      // })
    },
    //方法集合
    methods: {
      // 查看事情
      examine(url) {
        console.log(url)
        this.$router.push(url);
        this.$store.commit('amendCliskwhich',"3"); 
      },
      // 弹窗关闭
      closeDialog() {
        console.log("关闭弹窗")
      },
      // 选中事情
      handleCheckedCitiesChange(val) {
        console.log(val)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='less' scoped>
  .header {
    .box {
      width: 100%;
      height: 20px;

      /* background: red; */
      .box1 {
        width: 80%;
        float: left;
      }

      .box2 {
        width: 20%;
        /* background: yellow; */
        float: left;
        text-align: center;
        font-size: 12px;

      }
    }
  }

</style>
